<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>

	<head>
		<base href="<%=basePath%>">

		<title>系统功能列表</title>

		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>jslib/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>css/theme.css">
		<link rel="stylesheet"
			href="<%=basePath%>jslib/font-awesome/css/font-awesome.css">
<!-- 		日期引入  start-->
			<script src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<!-- 		日期引入  end-->
		<script src="<%=basePath%>jslib/jquery-1.7.2.min.js"
			type="text/javascript"></script>
		<script src="<%=basePath%>/jquery/jquery-3.2.1.js" ></script>
<!-- 图片滚动开始 -->
 <link rel="stylesheet" href="<%=basePath%>css/base.css">
 <link rel="stylesheet" href="<%=basePath%>css/bannerList.css">
 <script src="<%=basePath%>js/bannerList.js"></script>
  <script src="<%=basePath%>js/jquery.min.js"></script>

<!-- 图片滚动结束 -->

 <style type="text/css">
        .box {width:auto;}
		.pic ul {  width:500px; }
 </style>
<!--  级联下拉 -->
<script type="text/javascript">

/*written by keefelu*/

window.onload=function(){

    var aslt=document.getElementsByTagName('select')[1];

    var aotn=aslt.getElementsByTagName('option')[1];

    aslt.onchange=function(){

        turnCity();

    }        

};



function turn(){

    var provinceList=new Array();

	provinceList['请选择品牌']=["请选择车型"];

    provinceList['奥迪']=["请选择车型","奥迪A3","奥迪A4","奥迪Q3","奥迪Q5",".."];

    provinceList['比亚迪']=["请选择车型","唐","宋","元"];

    provinceList['大众']=["请选择车型","一汽-大众CC","宝来","POLO","帕萨特","朗逸"];

    var province=document.forms[0].province;//文档中的第一个省份；

    province.options.length=0;//把province下拉列表的选项清0

    var index=document.forms[0].country.value; //文档中的第一个国家；

    province.options.length=0;

    for(var j in provinceList[index]){

        newOption=new Option(provinceList[index][j],provinceList[index][j]);

        province.options.add(newOption);		

		var city=document.forms[0].city;//文档中的第一个市区；

        city.options.length=1;//把city下拉列表的选项清0

    }

}

function turnCity(){
        var cityList=new Array();

		cityList['请选择车型']=["请选择款式"];

		cityList['..']=["....."];

        cityList['奥迪A3']=["请选择款式","2017款 奥迪A3 Sportback 35 TFSI 风尚型","2017款 奥迪A3 Sportback 35 TFSI 时尚型","2017款 奥迪A3 Sportback 35 TFSI 进取型","2017款 奥迪A3 Limousine 40 TFSI 运动型"];
        cityList['奥迪A4']=["请选择款式","2008款 奥迪A4 1.8T 手动舒适型","2008款 奥迪A4 1.8T 自动舒适型","2008款 奥迪A4 1.8T 个性风格版","2008款 奥迪A4 1.8T 自动豪华型","2008款 奥迪A4 2.0T 个性风格版"];
        cityList['奥迪Q3']=["请选择款式","2017款 奥迪Q3 30 TFSI 运动型","2017款 奥迪Q3 30 TFSI 风尚型","2017款 奥迪Q3 30 TFSI 时尚型","2017款 奥迪Q3 30 TFSI 标准型","2017款 奥迪Q3 40 TFSI quattro 全时四驱风尚型"];
        cityList['奥迪Q5']=["请选择款式","2017款 奥迪Q5 40 TFSI 豪华型","2017款 奥迪Q5 40 TFSI 动感型","2017款 奥迪Q5 40 TFSI 舒适型","2017款 奥迪Q5 40 TFSI 时尚型","2017款 奥迪Q5 40 TFSI 技术型"];



        cityList['唐']=["请选择款式","2017款 唐100 2.0T","2015款 唐 2.0T 四驱豪华型","2015款 唐 2.0T 四驱尊贵型","2015款 唐 2.0T 四驱旗舰型"];

        cityList['宋']=["请选择款式","2017款 宋 盖世升级版 2.0TID 自动4G旗舰型","2017款 宋 盖世升级版 2.0TID 自动4G尊贵型","2017款 宋 盖世升级版 1.5TID 自动豪雅型","2017款 宋 盖世升级版 1.5TID 自动精英型"];

		cityList['元']=["请选择款式","2017款 元 1.5L 自动酷炫互联型","2017款 元 1.5L 自动酷炫时尚型","2017款 元 1.5L 手动酷炫互联型","2017款 元 1.5L 手动酷炫时尚型"];

        cityList['一汽-大众CC']=["请选择款式","2016款 一汽-大众CC 300TSI 25周年纪念版","2016款 一汽-大众CC 1.8TSI 尊贵型","2016款 一汽-大众CC 1.8TSI 豪华型","2016款 一汽-大众CC 2.0TSI 尊贵型","2016款 一汽-大众CC 2.0TSI 豪华型"];

        cityList['宝来']=["请选择款式","2017款 宝来 230TSI DSG运动版","2017款 宝来 230TSI 自动两百万辆纪念版","2017款 宝来 230TSI 手动两百万辆纪念版","2017款 宝来 230TSI DSG豪华型"];

        cityList['POLO']=["请选择款式","2016款 POLO 1.4L 手动风尚型","2016款 POLO 1.4L 自动风尚型","2016款 CrossPOLO 1.4L 手动","2016款 CrossPOLO 1.4L 自动"];

        cityList['帕萨特']=["请选择款式","2017款 帕萨特 380TSI DSG旗舰版","2017款 帕萨特 380TSI DSG御尊版","2017款 帕萨特 330TSI DSG领尊版","2017款 帕萨特 330TSI DSG御尊版","2017款 帕萨特 330TSI DSG尊荣版"];

        cityList['朗逸']=["请选择款式","2017款 朗逸 280TSI DSG运动版","2017款 朗逸 230TSI DSG豪华版","2017款 朗逸 230TSI DSG舒适版","2017款 朗逸 230TSI 手动舒适版","2017款 朗逸 1.6L 自动舒适版"];

        var city=document.forms[0].city;//文档中的第一个市区；

        city.options.length=0;//把city下拉列表的选项清0

        var index=document.forms[0].province.value;

        city.options.length=0;

        for(var j in cityList[index]){

            newOption=new Option(cityList[index][j],cityList[index][j]);

            city.options.add(newOption);

        }

}

</script>

	
	
	</head>
<body>
<div class="banner">
        <ul class="">
            <li><a href=""><img src="<%=basePath%>img/banner1.jpg" style="width:800px;height:390px;" alt=""></a></li>
            <li><a href=""><img src="<%=basePath%>img/banner2.jpg" style="width:800px;height:390px;" alt=""></a></li>
            <li><a href=""><img src="<%=basePath%>img/banner3.jpg" style="width:800px;height:390px;" alt=""></a></li>
            <li><a href=""><img src="<%=basePath%>img/banner4.jpg" style="width:800px;height:390px;" alt=""></a></li>
            <li><a href=""><img src="<%=basePath%>img/banner5.jpg" style="width:800px;height:390px;" alt=""></a></li>
        </ul>
        <div class="left-btn"></div>
        <div class="right-btn"></div>
        <div class="img-btn-list"></div>
</div>

<form action = "car" method="post">
选车车品牌：
<select name="country" onchange="turn()">
<option value="请选择品牌" selected="selected">请选择品牌</option>
<option value="奥迪">奥迪</option>
<option value="比亚迪">比亚迪</option>
<option value="大众">大众</option>
</select>
选择汽车型号：
<select name="province">
<option value="0" selected="selected">请选择车型</option>
</select>
选车汽车款式：
<select name="city">
<option value="0" selected="selected">请选择款式</option>
</select><br>
<!-- 车辆登记日期： -->
<!-- <input type="text" name="cartime" class="Wdate" onClick="WdatePicker()"> -->
<center><button type="submit" >车辆确认</button></center>
</form>
 <script>
        /*=======================
调用方法：
 传递参数方法如下：
 对象1：banner最大容器====================必填
 对象2：banner======>按钮父容器============必填
 对象3，4：banner====>左右按钮对象名===========必填
 对象5：banner滚动时间==================>可选项=======>默认为2000
 对象6：是否需要自动轮播需要==========true============不需要false:必填
=============================*/


bannerListFn(
    $(".banner"),
    $(".img-btn-list"),
    $(".left-btn"),
    $(".right-btn"),
    2000,
    true
);
</script>
</body>
</html>